<template>
  <nav-bar>
    <template v-slot:default>我的账户</template>
  </nav-bar>
  <div class="cards" v-for="(item, index) in list" :key="index">
    <div class="card">
      <div class="ding">
        <div class="left">
          <img
            src="../../assets/images/card.png"
            style="width:90%;margin:0 auto"
          />
        </div>
        <div class="right">
          <p>
            <strong>三好银行借记卡</strong>
          </p>
          <p>
            <!-- {{ Math.floor(list[index].no / 1000000000000000) }}****{{
              list[index].no % 10000
            }} -->
            {{ list[index].id }}
          </p>
        </div>
      </div>
      <div class="di">
        <p style="margin-right:auto">人民币余额</p>
        <p>{{ list[index].money }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import NavBar from "../../components/common/navbar/NavBar.vue";
import { allAccount } from "@/api/account";
export default {
  components: {
    NavBar,
  },
  setup() {
    const state = reactive({
      list: "",
    });
    const initAccount = async () => {
      const res = await allAccount(localStorage.getItem("userID"));
      console.log(res);
      state.list = res.data;
    };
    initAccount();

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style>
.cards {
  margin: 70px auto 0;
  width: 80%;
}
.ding {
  width: 100%;
  height: 70%;
  display: flex;
  float: left;
}
.left {
  width: 30%;
}
.right {
  padding-top: 7%;
  width: 40%;
  line-height: 22px;
}
.di {
  width: 100%;
  height: 20%;
  display: flex;
  justify-content: flex-end;
}
.card {
  margin-bottom: 60px;
  padding: 5% 5%;
  width: 100%;
  background: rgb(232, 241, 236);
  border-radius: 20px;
  box-shadow: 0 0 8px #fff, 0 5px 13px rgb(0 0 0 / 7%);
}
</style>
